<template>
  <view class="vaccine">
    <view class="search-box">
      <u-search
        :show-action="true"
        actionText="搜索"
        :animation="true"
        placeholder="搜索疫苗、疾病"
        v-model="keyword"
        @search="searchKeyword"
        @custom="searchKeyword"
      ></u-search>
    </view>

    <!-- 金刚区 -->
    <view class="btn-box">
      <view class="btn-item">
        <i class="iconfont icon-locationfill"></i>
        <view class="label">附近接种机构</view>
      </view>
      <view class="btn-item" @click="linkTo('/pages/Vaccine/VaccineCatalogue/index')">
        <i class="iconfont icon-icon_Catalogue"></i>
        <view class="label">疫苗目录</view>
      </view>
      <view class="btn-item">
        <i class="iconfont icon-child" @click="linkTo('/pages/Vaccine/ChildrenVaccineRemind/index')"></i>
        <view class="label">儿童接种提醒</view>
      </view>
    </view>

    <!-- 推荐疫苗 -->
    <view class="recommend-vaccine-box">
      <view class="title">推荐疫苗</view>
      <view class="recommend-list" v-for="item in vaccineList" :key="item.type">
        <view class="type-name">{{ item.type }}</view>
        <view class="vaccine-box">
          <view
            class="vaccine-label"
            v-for="vaccine in item.data"
            :key="vaccine.id"
             @click="linkTo('/pages/Vaccine/VaccineDetail/index?id='+vaccine.id)"
            >{{ vaccine.name }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { queryRecommendVaccine } from "@/api";
export default {
  data() {
    return {
      vaccineList: [],
      keyword:""
    };
  },

  components: {},

  async mounted() {
    // 获取推荐疫苗
    let result = await queryRecommendVaccine();
    this.vaccineList = result.data;
  },

  methods: {
    linkTo(url) {
      uni.navigateTo({
        url,
      });
    },

    // 搜索
    searchKeyword(value){
      this.linkTo('/pages/Vaccine/SearchResult/index?keyword='+ value)
    }
  },
};
</script>

<style scoped lang='scss'>
.vaccine {
  padding: 40rpx;
  .btn-box {
    margin-top: 40rpx;
    display: flex;
    justify-content: space-around;
    .btn-item {
      display: flex;
      align-items: center;
      flex-direction: column;
      &:nth-child(1) {
        i {
          background: #4a9bc1;
        }
      }
      &:nth-child(2) {
        i {
          background: #badb85;
        }
      }
      &:nth-child(3) {
        i {
          background: #e1738c;
        }
      }
      i {
        color: #fff;
        font-size: 30rpx;
        padding: 30rpx;
        border-radius: 99rpx;
      }
      .label {
        font-size: 24rpx;
        color: #666;
        margin-top: 20rpx;
        text-align: center;
      }
    }
  }

  .recommend-vaccine-box {
    margin-top: 40rpx;
    .title {
      font-size: 28rpx;
      color: #666;
    }
    .recommend-list {
      background: #fff;
      padding: 30rpx;
      padding-bottom: 0;
      border-radius: 30rpx;
      margin-top: 30rpx;
      display: flex;
      .type-name {
        font-size: 28rpx;
      }
      .vaccine-box {
        margin-left: 40rpx;
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        .vaccine-label {
          margin-bottom: 30rpx;
          margin-right: 30rpx;
          font-size: 28rpx;
          color: #666;
        }
      }
    }
  }
}
</style>